<template>
    <div class="header-component">
        <div class="left-container">
            <div class="list">
                <span
                    class="list-item"
                    v-for="item in list"
                    :class="[item.index ? 'list-item-active' : '']"
                    :key="item.id"
                    @click="change(item.id)"
                >
                    {{ item.title }}
                </span>
            </div>
        </div>
        <div class="right-container">
            <div class="search">
                <span>查找您想查看的内容...</span>
            </div>
            <div class="avatar"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HeaderComponent',
    data() {
        return {
            list: [
                {
                    id: 1,
                    index: true,
                    title: '首页'
                },
                {
                    id: 2,
                    index: false,
                    title: '博客'
                }
            ]
        }
    },
    methods: {
        change(id) {
            this.list = this.list.map((item) => {
                if (item.id === id) {
                    return { ...item, index: true }
                }
                return { ...item, index: false }
            })
        }
    }
}
</script>

<style scoped>
.header-component {
    width: 100%;
    height: 44px;
    padding: 0 2vw;
    display: flex;
    color: #fff;
    font-size: 14px;
    background-color: #333333;
}

.left-container {
    width: 50%;
    height: 100%;
}

.list {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.list > .list-item {
    margin-right: 8px;
    opacity: 0.6;
    cursor: pointer;
}

.list > .list-item-active {
    opacity: 1;
}

.right-container {
    width: 50%;
    height: 100%;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.search {
    width: 400px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0 0 8px;
    background-color: #f5f5f5;
    opacity: 0.8;
    border-radius: 6px;
    margin-right: 8px;
}

.search > span {
    opacity: 1;
    color: #333;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background-color: #f5f5f5;
}
</style>
